import React from 'react';
import {Carousel} from 'element-react';
import 'element-theme-default';



class Recommend extends React.Component{	
	componentDidMount(){

		var that=this;
		var arr=["p6","p5","p4","p3","p2","p1"];
		var btnNext = document.getElementsByClassName('next')[0];
		var btnPrev = document.getElementsByClassName('prev')[0];
		var Box = document.getElementsByClassName('remd-list')[0];
		var aLi = Box.getElementsByTagName('li');
		function next(){
			arr.push(arr[0]);
			arr.shift();
			for(var i=0;i<aLi.length;i++){
				aLi[i].className="";
				aLi[i].className=arr[i];
			}
		}
		function prev(){
			arr.unshift(arr[5]);
			arr.pop();
			for(var i=0;i<aLi.length;i++){
				aLi[i].className="";
				aLi[i].className=arr[i];
			}
		}
		var timer = setInterval(next,4000);

		btnNext.onclick=function(){
			next();
		}
		btnPrev.onclick=function(){
			prev();
		}
		Box.onmouseover=function(){
			btnNext.style.display="block";
			btnPrev.style.display="block";
			clearInterval(timer);
		}
		Box.onmouseout=function(){
			btnNext.style.display='none';
			btnPrev.style.display='none';
			timer = setInterval(next,4000);
		}
		document.onclick=function(e){
			if(e.target.parentNode.parentNode.className=='p4'){
				next();
			}
			if(e.target.parentNode.parentNode.className=='p2'){
				prev();
			}
		}
	}
	render() {
		return (
			<div className="warpremd">
				<div className="remd">
					<div className="index-hd">
						<h2 className="index-tite">
							<span className="tit-sprite"></span>
						</h2>
					</div>
					<div className="remd-list">
						<ul>
							<li className="p6"><a href="#"><img src="./src/images/recommed/1.jpg" alt="" /></a></li>
							<li className="p5"><a href="#"><img src="./src/images/recommed/2.jpg" alt="" /></a></li>
							<li className="p4"><a href="#"><img src="./src/images/recommed/3.jpg" alt="" /></a></li>
							<li className="p3"><a href="#"><img src="./src/images/recommed/4.jpg" alt="" /></a></li>
							<li className="p2"><a href="#"><img src="./src/images/recommed/5.jpg" alt="" /></a></li>
							<li className="p1"><a href="#"><img src="./src/images/recommed/6.jpg" alt="" /></a></li>
						</ul>
						<a href="javascript:;" className="prev btn" >&lt;</a>
						<a href="javascript:;" className="next btn" >&gt;</a>
					</div>
					
				</div>
			</div>
		)
	}

}


export default Recommend;